<template>
	<view class="wrapper">
		<back :back-title="backTitle" class="back"></back>
		<scroll-view class="swiper-container" scroll-y="true">
			<swiper :indicator-dots="true" @change="change" :autoplay="false" indicator-active-color="#0D84D5" :interval="3000" :duration="1000" :style="{width: '100%',height: swiperHeight+'px'}">
				<swiper-item v-for="(item ,index) in info.imgUrls" :key="index">
						<view class="swiper-item">
								<image :src="item" :style="{width: '100%',height: swiperHeight+'px'}"></image>
						</view>
				</swiper-item>
			</swiper>
			<view class="info">
				<view class="title">{{parseTimeFuc(info.alumnusGraduationTime)}}届 {{info.alumnusName}}</view>
				<view class="text">
					<image src="/static/images/my/school2.png"></image>
					<text>就读院校：{{info.alumnusUniversity}}</text>
				</view>
				<view class="text">
					<image src="/static/images/my/company.png"></image>
					<text>就职单位：{{info.alumnusCompany}}</text>
				</view>
				<view class="text" v-if="info.alumnusState === 1">
					<image src="/static/images/my/phone.png"></image>
					<text>联系方式：{{info.alumnusContact}}</text>
				</view>
				<view class="text">
					<image src="/static/images/my/motto.png"></image>
					<text>人生格言：{{info.alumnusMotto}}</text>
				</view>
				<view class="text">
					<image src="/static/images/my/teacher.png"></image>
					<text>寄语：{{info.alumnusMessage}}</text></view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import {getDetail} from '@/api/waterfall.js'
	import {parseTime} from '@/utils/index.js'
	export default{
		data() {
			return {
				backTitle: '校友录详情',
				alumnusId: '',
				info: {
					alumnusId: "",
					alumnusName: "荀阳",
					alumnusGender: 1,
					alumnusPhoto: "",
					alumnusGraduationTime: 1561910400000,
					alumnusUniversity: "",
					alumnusCompany: "",
					alumnusMotto: "",
					alumnusMessage: "",
					alumnusContact: "",
					alumnusState: 1,
					imgUrls: []
				},
				swiperHeight: 0
			}
		},
		onLoad(options) {
			const {alumnusId} = options
			this.alumnusId = alumnusId
			this.initData()
		},
		methods: {
			parseTimeFuc(time) {
				const newTime = parseTime(time)
				return newTime.substring(0,4)
			},
			async initData() {
				uni.showLoading({
					title:'加载中'
				})
				const {alumnusId} = this
				const res = await getDetail({alumnusId})
				console.log(res)
				const imgUrls = res.alumnusImges.split(',')
				this.info = Object.assign({},{...res},{imgUrls})
				this.imgH(imgUrls[0])
				uni.hideLoading()
			},
			imgH(e) {
				const _this = this
				const winWid = wx.getSystemInfoSync().windowWidth*2;       //获取当前屏幕的宽度*2
				wx.getImageInfo({//获取图片长宽等信息
					src: e,
					success: function (res) {
						const imgw =res.width;
						const imgh = res.height
						const swiperH = winWid * imgh / imgw
						_this.swiperHeight = uni.upx2px(swiperH)
						console.log(swiperH)
					}
				})
			},
			change(e) {
				const index = e.detail.current
				this.imgH(this.info.imgUrls[index])
			}
		}
	}
</script>

<style lang="scss" scope="true">
	.wrapper{
		width: 100%;
		min-height:100vh;
		position: relative;
		image{
			width: 100%;
			height: auto;
		}
		.swiper-container{
			width:100%;
			height: calc(100vh - 158upx);
			box-sizing: border-box;
		}
		.info{
			width: 100%;
			background-color: #fff;
			padding: 30upx 10upx;
			box-sizing: border-box;
			.title {
				font-size:38upx;
				font-weight:bold;
				color:#fff;
				margin: 0 auto;
				line-height:58upx;
				background-color: #0D84D5;
				width:308upx;
				text-align: center;
				margin-bottom: 20upx;
				height:67upx;
				line-height: 67upx;
				background:rgba(13,132,213,1);
				border-radius:5upx;
			}
			.text{
				font-size:28upx;
				font-weight:500;
				color:rgba(51,51,51,1);
				padding: 20upx 0;
				box-sizing: border-box;
				font-weight:500;
				line-height: 38upx;
				display: flex;
				position: relative;
				text{
					margin-left: 70upx;
				}
				image{
					width: 60upx;
					height: 60upx;
					position: absolute;
					top: 10upx;
					left: 0;
				}
			}
		}
	}
</style>
